<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <link rel="stylesheet" href="css/index.css">
        <title>关于我们</title>
        <style>
            .about-container {
                max-width: 800px;
                margin: 0 auto;
                padding: 20px;
                background-color: #fff;
                min-height: calc(100vh - 100px);
            }
            .nav {
                background-color: #2c3e50;
                padding: 15px;
                text-align: center;
                margin-bottom: 20px;
            }
            .nav a {
                color: #fff;
                text-decoration: none;
                margin: 0 15px;
                font-size: 16px;
                padding: 8px 15px;
                border-radius: 4px;
                transition: background-color 0.3s;
            }
            .nav a:hover {
                background-color: #34495e;
            }
            .about-header {
                text-align: center;
                margin-bottom: 30px;
                padding-bottom: 20px;
                border-bottom: 2px solid #3498db;
            }
            .about-header h1 {
                color: #2c3e50;
                font-size: 2.5em;
                margin-bottom: 10px;
            }
            .about-content {
                line-height: 1.8;
                color: #555;
            }
            .about-section {
                margin-bottom: 30px;
            }
            .about-section h2 {
                color: #2980b9;
                font-size: 1.8em;
                margin-bottom: 15px;
                padding-bottom: 10px;
                border-bottom: 1px solid #ecf0f1;
            }
            .about-section p {
                margin-bottom: 15px;
                font-size: 16px;
            }
            .team-info {
                background-color: #f8f9fa;
                padding: 20px;
                border-radius: 8px;
                margin-top: 20px;
            }
            .contact-info {
                background-color: #e8f4f8;
                padding: 20px;
                border-radius: 8px;
                margin-top: 20px;
            }
            .contact-info ul {
                list-style: none;
                padding-left: 0;
            }
            .contact-info li {
                margin-bottom: 10px;
                padding-left: 25px;
                position: relative;
            }
            .contact-info li:before {
                content: "•";
                color: #3498db;
                font-weight: bold;
                position: absolute;
                left: 0;
            }
            @media (max-width: 768px) {
                .about-header h1 {
                    font-size: 2em;
                }
                .nav a {
                    display: block;
                    margin: 5px 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <a href="index.html">首页</a>
            <a href="about.html">关于我们</a>
            <a href="poem.html">藏头诗</a>
            <a href="translate.html">翻译</a>
            <a href="express.html">快递查询</a>
            <a href="ip.html">IP查询</a>
            <a href="workday.html">工作日查询</a>
            <a href="network.html">网络状态</a>
            <a href="vibrate.html">震动功能</a>
            <a href="battery.html">电池状态</a>
        </div>
        <div class="about-container">
            <div class="about-header">
                <h1>关于我们</h1>
                <p style="color: #7f8c8d; font-size: 1.2em;">了解我们的团队和使命</p>
            </div>

            <div class="about-content">
                <div class="about-section">
                    <h2>组织简介</h2>
                    <p>坚果派（NutPi）是一支专注于移动应用开发的技术团队，致力于使用最新的Web技术为企业和个人提供高质量的跨平台移动应用解决方案。</p>
                    <p>通过Apache Cordova框架和Harmony Cordova扩展，我们能够将Web应用快速转换为原生移动应用，支持多个平台，包括Android、iOS和HarmonyOS等。我们专注于技术创新，为客户提供优质的产品和服务。</p>
                </div>

                <div class="about-section">
                    <h2>我们的使命</h2>
                    <p>我们的使命是帮助开发者和企业以更低的成本和更快的速度构建跨平台移动应用，让Web技术的优势在移动端得到充分发挥。</p>
                    <p>我们相信，通过使用标准Web技术（HTML5、CSS3和JavaScript），可以创建出功能强大、性能优异的移动应用。</p>
                </div>

                <div class="about-section">
                    <h2>我们的优势</h2>
                    <ul style="padding-left: 20px;">
                        <li>丰富的跨平台开发经验</li>
                        <li>专业的团队和技术支持</li>
                        <li>完善的开发工具和流程</li>
                        <li>持续的技术更新和学习</li>
                        <li>优质的客户服务</li>
                    </ul>
                </div>

                <div class="team-info">
                    <h2 style="margin-top: 0;">技术团队</h2>
                    <p>我们的团队由经验丰富的Web开发工程师、移动应用开发专家和UI/UX设计师组成。团队成员在各自领域都有多年的实践经验，能够为客户提供全方位的技术支持和服务。</p>
                </div>

                <div class="contact-info">
                    <h2 style="margin-top: 0;">联系我们</h2>
                    <ul>
                        <li>邮箱: contact@example.com</li>
                        <li>电话: +86 123-4567-8900</li>
                        <li>地址: 中国</li>
                    </ul>
                </div>
            </div>
        </div>

        <script src="cordova.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>

